<%-- 
    Document   : categories
    Created on : 14/Jan/2012, 14:20:53
    Author     : sexta13
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<div id="leftcolumn">
    <div id="basic-modal">	
        <h3 class="leftbox">Categories  
            <input class="basic" type="image" src="images/addIcon.png"  name="addCategoria" height="16" width="16"/>
        </h3>
    </div>
    <ul class="leftbox borderedlist">
        <s:include value="contents/categoriasContent.jsp"/>
    </ul>
    <h3 class="leftbox header_small">Cloud Tags</h3>
    <div class="leftbox features">
        aki ficaria uma cloud tag
    </div>
    <hr />
</div>
<div id="basic-modal-content">
    <s:form id="adicionarCat" onsubmit="return checkForm();" action="AdicionarCategoriaAction">
        <h3 id="adicionarCategorias" style="cursor: pointer;">Adicionar categoria</h3>
        <!--  categorias e keywords -->
        <div id="adicionarCategoriaContent">
            <table>
                <tr>
                    <th width="30%">Nome da categoria</th>
                    <td width="70%"><s:textfield name="nomeCategoria"  id="nomeCategoria" size="23"/></td>
                </tr>
                <tr>
                    <th width="30%">Palavras chaves</th>
                    <td><s:textfield  id="palavraChave" cssClass="float: left;" size="14" /><input type="button" value="adicionar"  onclick="return adicionarPalavraChave();"/></td>
                </tr>
                <tr>
                    <td width="100%" colspan="2">
                        <s:select list="{}" multiple="true" name="lstPalavrasChave" id="listaPalavrasChave" size="5" cssStyle="width:330px"/>                
                    </td>
                </tr>                  
            </table>
        </div>
        
        <!-- Feeds novas -->
        <h3 id="adicionarFeeds" style="cursor: pointer;">Adicionar RSS's</h3>
        <div id="adicionarFeedsContent">
            <table style="width: 100%"><tr><td><s:textfield  name="urlRSS" size="33"/></td></tr></table>
        </div>
        
        <!-- lista de feeds qu se pretende associar -->
        <h3 id="seleccionarRSS" style="cursor: pointer;">Seleccionar RSS's existentes</h3>
        <div id="seleccionarRSSContent">
            <table style="width: 100%">
                <tr>
                	<td>
                		<s:select list="listaFeeds" multiple="true" listKey="id" listValue="descricao" name="listaRssExistentes" size="11" cssStyle="width:335px"/>
                	</td>
                </tr>                               
            </table>
        </div>
        
        <div style="text-align: right;">
            <input type="submit" value="Guardar"/></div>
        </s:form>
</div>

<script type="text/javascript">
    
    function adicionarPalavraChave(){               
        $("#listaPalavrasChave").append("<option selected='true' value='"+$("#palavraChave").val()+"'>" +$("#palavraChave").val()+"</option>");
        $("#palavraChave").val("");
    
        return true;
    }
    
    function checkForm() {
    	if( $("#nomeCategoria").val() === "" ) {
    		alert("Têm de preencher uma categoria!");
    		return false;
    		
    	}
    	return true;
    }
    
    $(document).ready(function() {
    	/*$("#adicionarCategoriaContent").hide();
        $("#adicionarFeedsContent").hide();
        $("#seleccionarRSSContent").hide();
        
        $("#seleccionarRSS").click(function () {
            $("#seleccionarRSSContent").slideToggle("fast");
        });
        
        $("#adicionarCategorias").click(function () {
            $("#adicionarCategoriaContent").slideToggle("fast");
        });
               
        $("#adicionarFeeds").click(function () {
            $("#adicionarFeedsContent").slideToggle("fast");
        });*/
        
        $('.editCategoria').click(function (e) {
            $.ajax({
                url: "EditCategoriasAction.action?idCategoria="+$(this).prev().prev().attr("value")+"&nomeCategoria="+$(this).prev().attr("name"),
                processData: false,
                dataType: "html",
                success: function(content) {
                    $.modal(content);
                    $('.removerPalavraChave').click(function (e) {
                        $.ajax({
                            url: "RemoverPalavraChaveCategoriaAction.action?"+$(this).prev().attr("value"),
                            processData: false,
                            dataType: "html",
                            success: $(this).parent().remove()                                                                                             
                        });

                    });      
                    return false;
                }
            });
        });
        
        $('.mostrarItemsDaCategoria').click(function (e) {
            $.ajax({
                url: "MostrarItemsCategoriaAction.action?idCategoria="+$(this).prev().attr("value"),
                processData: false,
                dataType: "html",
                success: function(content) {
                    $("#center").html(content);
                    return false;
                }
            });

        });
    });   
</script>
